<template>
	<view  id="guide-container" class="content">
		<mask-guide-uni ref="maskGuide">
		</mask-guide-uni>
		<view class="hspl" id="guide_0" data-guide-text="第一步选择您要回收的物品类型" style="height: 150px;padding-bottom: 0px;" >
			<view class="hspl-title" >回收品类</view>
			<view class="hspl-content" >
				<view class="hspl-content-item" v-for="(item,index) in typeList" :key="index" :class="[type==item._id?'select':'']" @click="changeType(item._id)">
					<image :src="item.order"></image>
				</view>
			</view>
		</view>
	    <view class="hsyq">
			<view class="hsyq-title">回收要求</view>
			<view class="hsyq-content">
				<view class="hsyq-content-item">
					<image src="/static/images/jjcs.png"></image>
					<view class="hsyq-content-item-remark">拒绝掺水</view>
				</view>
				<view class="hsyq-content-item">
					<image src="/static/images/jjcj.png"></image>
					<view class="hsyq-content-item-remark">拒绝掺假</view>
				</view>
				<view class="hsyq-content-item">
					<image src="/static/images/dc10k.png"></image>
					<view class="hsyq-content-item-remark">单次10kg起</view>
				</view>
			</view>
		</view>
	    <view class="ygzl">
			<view class="ygzl-title">预估重量</view>
			<view class="ygzl-content">
				<view class="ygzl-content-item" :class="[weight=='1'?'select':'']" @click="changeWeight('1')">10-50斤</view>
				<view class="ygzl-content-item" :class="[weight=='2'?'select':'']" @click="changeWeight('2')">50-100斤</view>
				<view class="ygzl-content-item" :class="[weight=='3'?'select':'']" @click="changeWeight('3')">100斤以上</view>
			</view>
			<view class="ygzl-mark" v-if="weight!='3'"> 
				<view>未满100公斤，不需要添加照片</view>
				<!-- <view  class="ygzl-mark-btn"  @click="addGoods()">+添加品类</view>-->
			</view>
			<!-- <view class="ygzl-mark" v-if="weight=='3'">
			    <view>超过100公斤，请添加回收物照片</view>	
				<view class="ygzl-mark-btn" @click="addGoods()">+添加品类</view>
			</view> -->
			<view class="ygzl-file"  v-if="weight=='3'">
				<view>超过100公斤，请添加回收物照片</view>	
				<file-upload
					 :imageLength="imageLength"
					 v-on:sendAtts="getAtts"
					 mode="create"
					 :canUploadFile="true"
					 :uploadFileUrl="uploadFileUrl"
					 :showProcess="true"
					 :attachmentList.sync="attachmentList"
					 :attId="attId"
					 @uploadSuccess="uploadSuccess"
					>
				</file-upload>
			</view>
		</view>
		<view style="border-bottom: solid 1upx #F5F5F5;"></view>
		<view class="explain">
			<view class="explain-title">注意事项</view>
			<view class="explain-content">1、因回收成本原因，社区、写字楼单元楼价格面议</view>
			<view class="explain-content">2、小于10公斤暂不保证上门回收</view>
			<view class="explain-content">3、重量超过100公斤，需提供照片供回收员参考</view>
		</view>
	    <view class="subscribe">
			<view class="subscribe-view" style="margin-top: 20upx">
			  <view class="subscribe-view-left"> 预约时间 </view>
			  <view class="subscribe-view-right isselect" @tap="shortTermVisible=true">
				 <view class="uni-input" >
				 {{model.useDate}}
				 </view>
				 
				  <!-- <uni-datetime-picker :value="model.useDate" 
				  :border="false"
			      @change="bindDateChange"></uni-datetime-picker> -->
			  </view>
			</view>
			<view id="guide_1" data-guide-text="第二步选择您要回收的物品的地址" class="subscribe-view" style="height: 200upx;width: calc(100% - 60rpx);overflow: hidden;">
			  <view class="subscribe-view-left" style="height: 200upx;width: 260upx; line-height: 200upx;"> 预约地址 </view>
			  <view class="subscribe-view-right  isselect" style="height: 200upx;">
			      <view class="uni-input" style="height: 200upx;line-height: initial;display: flex; align-items: center;vertical-align: center;" @click="selectAddress()">{{
			        model.userAddress === "" ? "请选择" : model.userAddress
			      }}</view>
			    </picker>
			  </view>
			</view>
		</view>
	    <view class="submit">
			<view class="submit-explain" @click="openExplain()">
				确认下单将自动默认<span style="color: #31b977;">《上门回收免费条款》</span>
			</view>
			<view id="guide_2" data-guide-text="第三步选择完成后提交回收订单" class="submit-btn">
				<button type="primary" style="width: 40%;" @click="addHsOrder('1')">公益赠送</button>
				<button style="width: 40%;background-color: #409eff;color: #FFFFFF;" @click="addHsOrder('0')" >立即下单</button>
			</view>
		</view>
		
		<w-picker
			:visible.sync="shortTermVisible"
			mode="shortTerm"
			:current="true"
			@confirm="bindDateChange($event,'shortTerm')"
			ref="shortTerm" 
		></w-picker>
	</view>
</template>

<script>
	import {dateUtils} from '@/common/utils.js'
	import FileUpload from "@/components/file-upload/file-upload.vue"
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	
	import {
		mapGetters
	} from 'vuex'
	export default {
		components:{
			FileUpload,
			neilModal
		},
		computed: {
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		data() {
			return {
				shortTermVisible:false,
				imageLength: 5, //限制图片张数
				model:{
					useDate: "",
					userTime:"",//预约时间
					userAddress:"",//预约地址
					addressId:"",
					districtCode:"",
				},
				attachmentList: [],
			    type:"1", 
				weight:"1",
				ztreeList:[],
				goodsList:[],
				listAddress:[],
				showModal:false,
				atts:[],
				orderGoods:[],
				typeList:[]
			}
		},
		onLoad() {
			if(!this.userInfo.isNewUser){
				this.$refs.maskGuide.start({
				  textStyle:{
				    fontSize: '24rpx',
				  },
				  showNextButton: true
				})
			}
			this.userInfo.isNewUser=1
			this.$api('user-center','updateUser', {isNewUser:true}).then(res=>{
				this.$store.commit('user/login', this.userInfo)
			})
			
		},
		onShow(e) {
			let date=new Date();
			date.setHours(date.getHours()+1)
			this.model.useDate=dateUtils.formatDate(date)
			this.$api("garbage","getGarbageType").then(res=>{
				this.typeList=res.data
				this.type=getApp().globalData.homeType||res.data[0]._id
			})
			getApp().globalData.defaultAddress?this.getSelectAddress(getApp().globalData.defaultAddress):null
		},
		methods: {
			changeType(e){
			   this.type=e;
			},
			changeWeight(e){
				this.weight=e;
			},
			getWeightContent(weight){
				switch(weight){
					case "1": return "10-50公斤"
					break;
					case "2" : return "50-100公斤"
					break;
					case "3" : return "100公斤以上"
					break;
				}
			},
			addHsOrder(type){
				if(this.model.addressId==""){
					this.$msg("请选择地址");
					return false;
				}
				let data={
					garbageType:this.type,
					garbageWeight:this.weight,
					images:this.atts,
					addressDesc:this.model.userAddress,
					appointTime:this.model.useDate,
					addressId:this.model.addressId,
					addressInfo:this.model.addressInfo,
					publicGive:type,
					state:0//未接单
				}
				this.$api("recovery-order","add",data).then(res=>{
					this.$msg("下单成功");
					uni.requestSubscribeMessage({
					  tmplIds: ['aPItP2S5Ia6W5CqHD_CO2UK7A8XX2zGnHrJR9yuzKNc'],
					  complete: (res)=> {
						  uni.switchTab({
						  	url:"../order/order"
						  })
					  }
					})
				})
			},
			
			getSelectAddress(item){
				this.model.addressInfo=item
				this.model.userAddress=item.locationAddress+"("+item.addressDetail+")"
			    this.model.addressId=item.id;
				this.model.districtCode=item.districtCode;
			},
			getAtts(value){
				this.atts = value;
			},
			
			uploadSuccess(result) {
				if(result.statusCode == 200) {
					//上传成功的回调处理
					uni.showToast({
						title: '上传成功',
						icon: 'none'
					});
				}else{
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
				}
			},
			//预约日期
			bindDateChange(e) {
			  this.model.useDate = e.value;
			},
			openExplain(){
				uni.showModal({
					title: '用户协议',
					content: this.$store.state.config.systemConfig.userOrderAgreement,
					showCancel:false
				})
			},
			selectAddress(type){
				uni.navigateTo({
					url:"../user/address/address?type=1"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/components/iview/mixin.scss";
 .content{
	 background-color: #f5f5f5;
	 height: auto;
	 overflow-x: hidden;
 }
 .hspl{
	background-color: #FFFFFF;
	padding: 30upx 30upx;
	height: 100px;
	width: calc(100% -60upx);
 }
 .hspl-title{
	 font-size: 36upx;
	 font-weight: 600;
	 color: #222222;
 }
 .hspl-content{
	 margin-top: 30upx;
	 display: flex;
	 align-items: center;
	 justify-content: center;
 }
 .hspl-content-item{
	flex:1;
	height: 200upx;
	border: solid 3px #FFFFFF;
	border-radius: 10upx;
	text-align: center;
 }
 .select{
 	border: solid 3px #31b977!important;
 }
 .hspl-content-item image{
	 height: 200upx;
	 width:  150upx;
	 border-radius: 10upx;
 }
 .jrzdj{
	margin-top: 15upx; 
	padding: 30upx 30upx;
	background-color: #FFFFFF;
 }
 .jrzdj-title{
	 font-size: 36upx;
	 font-weight: 600;
	 color: #222222;
 }
 .jrzdj-content{
	 margin-top: 15upx;
	 background: #FFFFFF;
	 -webkit-box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.1);
	 box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.1);
	 -webkit-border-radius: 20upx;
	 border-radius: 20upx;
	 
 }
 .jrzdj-content-item{
	 padding: 20upx 40upx;
	 display: flex;
	 align-items: center;
	 justify-content:space-between;
 }
 .jrzdj-content-item-name{
	 font-size: 40upx;
	 font-weight: 600;
	 color: #222222;
 }
 .jrzdj-content-item-mark{
	 margin-top: 20upx;
 	 font-size: 34upx;
 	 font-weight: 600;
 	 color: #A5A5A5;
 }
 .jrzdj-content-item-price{
	 font-size: 40upx;
	 font-weight: 600;
	 color: #31b977;
 }
 .hsyq{
	 margin-top: 15upx;
	 padding: 30upx 30upx;
	 background-color: #FFFFFF;
 }
 .hsyq-title{
 	 font-size: 36upx;
 	 font-weight: 600;
 	 color: #222222;
 }
 .hsyq-content{
	 margin-top: 30upx;
	 display: flex;
	 align-items: center;
	 justify-content:space-between;
 }
 .hsyq-content-item{
	 flex:1;
	 text-align: center;
 }
 .hsyq-content-item image{
	 width: 130upx;
	 height: 130upx;
 }
 .hsyq-content-item-remark{
	 font-size: 34upx;
	 font-weight: 600;
	 color: #5c5c5c;
 }
 .ygzl{
	 margin-top: 15upx;
	 padding: 30upx 30upx;
	 background-color: #FFFFFF;
	 
 }
 .ygzl-content{
	 margin-top: 30upx;
	 display: flex;
	 align-items: center;
	 justify-content:space-between;
 }
 .ygzl-content-item{
	 height: 96upx;
	 width: 30%;
	 background: #f6f6f6;
	 line-height: 96upx;
	 font-size: 36upx;
	 font-weight: 700;
	 color: #31b977;
	 text-align: center;
	 border: solid 3px #f6f6f6;
	 border-radius: 10rpx;
 }
 .ygzl-mark{
	 margin-top: 30upx;
	 display: flex;
	 color: #222222;
	 font-size: 34upx;
	 height: 80upx;
	 line-height: 80upx;
	 justify-content: space-between;
 }
 .ygzl-mark-btn{
	 border-radius: 10upx;
	 background:#31b977 ;
	 color: #FFFFFF;
	 padding-left: 10upx;
	 width: 180upx;
 }
 .ygzl-file{
	 margin-top: 30upx;
 }
 .explain{
	 padding: 40upx 30upx;
	 background-color: #FFFFFF;
 }
 .explain-title{
	 text-align: center;
	 color: #31b977;
	 font-size: 38upx;
 }
 .explain-content{
	 margin-top: 10upx;
	 color: #B4B4B4;
	 font-size: 30upx;
 }

.subscribe{
	background-color: #FFFFFF;
	margin-top: 30upx;
	&-view {
	  height: 100upx;
	  line-height: 100upx;
	  padding-left: 30rpx;
	  padding-right: 30rpx;
	  display: flex;
	  justify-content: space-between;
	  position: relative;
	  &::after {
	    @include hairline();
	    border-bottom-width: 1px;
	    border-bottom-color: #d8d8d8;
	    top: 0upx;
	    left: 30rpx;
	  }
	  &-left {
	    line-height: 100rpx;
	    font-size: 32rpx;
	    font-weight: 400;
	    color: #BABABA;
	
	    &.isrequired {
	      position: relative;
	      padding-right: 16rpx;
	
	      &::before {
	        content: "*";
	        display: inline-block;
	        line-height: 100rpx;
	        position: absolute;
	        right: 0px;
	        color: #d0021b;
	      }
	    }
	  }
	
	  &-right {
	    line-height: 100rpx;
	    position: relative;
	    padding-right: 20rpx;
	    font-size: 32rpx;
	
	    &.nodata {
	      color: rgba(153, 153, 153, 1);
	    }
	
	    &.isselect {
	      position: relative;
	
	      &::before {
	        content: " ";
	        display: inline-block;
	        width: 6px;
	        height: 6px;
	        position: absolute;
	        top: 50%;
	        right: 0rpx;
	        border-width: 2px 2px 0 0;
	        border-color: #b0b0b0;
	        border-style: solid;
	        transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	      }
	    }
	  }
	}
} 

.submit{
	margin-top: 30upx;
	padding: 20upx 30upx 30upx;
	background-color: #FFFFFF;
}
.submit-explain{
	font-size: 28upx;
	color: #222222;
}
.submit-btn{
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content:space-between;
}

.order-goods{
	position:fixed;
	bottom:60upx;
	left:30upx;
	width:100upx;
	height:100upx;
	z-index: 99;
}
.order-goods-number{
	border-radius: 50%;
	width: 42upx;
	height: 42upx;
	line-height: 42upx;
	 background: #E64043;
	 color: #FFFFFF;
	 position:fixed;
	 bottom:115upx;
	 left:100upx;
	 text-align: center;
}
.order-modal{
	display: flex;
}
.order-modal-item{
	flex:1;
	font-size: 32upx;
	padding: 10upx 6upx;
	text-align: center;
}

 
</style>
